import React from "react";
import { Component } from "react";
import { withRouter } from "react-router";
import { getDangerCategoryDistributionApi, getMDangerCategoryDistributionApi } from "../../js/bigscreen/api";
import * as echarts from "echarts";
import "../../css/bigscreen/dangerdistribute.css";


var piechart;
class DangerDistribute extends Component {
    constructor(props) {
        super(props)
        this.state = {
            dangerCategory: [],
            isLoaded: false
        }
    }
    componentDidMount() {
        let educationId = parseInt(sessionStorage.getItem("departmentId"));
        if (this.props.match.params.county != undefined) {
            this.getDangerCategoryDistribution(this.props.match.params.county);
        } else {
            this.getMDangerCategoryDistribution(educationId);
        }

    }

    initPieChart = () => {
        if (this.state.isLoaded) {
            
            if (piechart == null) {
                piechart = echarts.init(document.getElementById("piechart"));
            } else {
                echarts.dispose(piechart)
                piechart = echarts.init(document.getElementById("piechart"));
            }
            window.onresize = function () {
                piechart.resize();
            }
            piechart.setOption({
                series: [
                    {
                        type: 'pie',
                        data: this.state.dangerCategory,
                        roseType: 'radius',
                        clockwise: true,
                        startAngle: 270,
                        label: {
                            formatter: '{b}\n   {c}',
                            color: '#A4D5F7',
                            padding: [-20, 0, 0, -10],
                        },
                        labelLine: {
                            length: 5,
                            length2: 5,
                            lineStyle: {
                                color: '#76CFFF',
                            }
                        }
                    },

                ]
            });
        }
    }

    getDangerCategoryDistribution = (educationId) => {
        getDangerCategoryDistributionApi(educationId).then((res) => {
            let datalist = []
            res.data.forEach((item) => {
                let temp = { name: '', value: 0 };
                temp.name = item.category;
                temp.value = item.dangersum;
                datalist.push(temp);
            })
            this.setState({
                dangerCategory: datalist,
                isLoaded: true
            })
            this.initPieChart();
        }).catch((e) => {
            console.log(e);
        })
    }
    getMDangerCategoryDistribution = (parent) => {
        getMDangerCategoryDistributionApi(parent).then((res) => {
            let datalist = []
            res.data.forEach((item) => {
                let temp = { name: '', value: 0 };
                temp.name = item.category;
                temp.value = item.dangersum;
                datalist.push(temp);
            })
            this.setState({
                dangerCategory: datalist,
                isLoaded: true
            })
            this.initPieChart();
        }).catch((e) => {
            console.log(e);
        })
    }

    render() {
        return (
            <div className="dangerbg">
                <div className="dangerheader">
                    <svg class="icon" aria-hidden="true">
                        <use xlinkHref="#icon-w_fenbu"></use>
                    </svg>
                    <span className="dangerheadertxt">安全隐患类型分布</span>
                </div>
                <div id="piechart"></div>
            </div>


        )
    }
}

export default withRouter(DangerDistribute)